<template>
  <div class="desc-item-index">
    <div v-if="label" class="desc-item-index__title">{{ label }}</div>
    <div class="desc-item-index__container" :style="`--col-span: ${ column }`">
      <slot />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  label: String,
  value: String,
  column: {
    type: Number,
    default: 1
  }
})
</script>

<style lang="scss" scoped>
.desc-item-index {
  background: linear-gradient(180deg, #EFF4FF 0%, #FAFCFF 100%);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  width: 100%;
  &__title {
    display: inline-block;
    min-width: 130px;
    padding: 4px 5px;
    background-color: var(--el-color-primary);
    border-bottom-right-radius: 10px;
    color: #fff;
    text-align: center;
  }
  &__container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(var(--col-span), 1fr);
    color: var(--app-color);
    grid-gap: 20px;
  }
}
</style>
